<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>考勤管理</title>
		<!--引入layui的css  -->
		<link rel="stylesheet" href="../layui/css/layui.css" />
	</head>
	<!--引入layui的js  -->
	<script type="text/javascript" src="../layui/layui.js"></script>
	<!--引入jquery的js  -->
	<script type="text/javascript" src="../js/jquery.min.js"></script>
	<script type="text/javascript" src="../js/global.js"></script>

	<body>
		<!-- 查询条件输入框 -->
		<div class="layui-form-item" style="margin-top: 10px;">
			<form class="layui-form" onsubmit="return false;">
				<label class="layui-form-mid">用户名:</label>
				<div class="layui-input-inline" style="width: 120px;">
					<input type="text" id="username" name="username" autocomplete="off" class="layui-input">
				</div>
				
				<label class="layui-form-mid">签到时间:</label>
				<div class="layui-input-inline" style="width: 170px;">
					<input type="text" id="checkintime" name="checkintime" placeholder="yyyy-MM-dd HH-mm-ss"
						autocomplete="off" class="layui-input">
				</div>
				<label class="layui-form-mid">--签退时间</label>
				<div class="layui-input-inline" style="width: 170px;">
					<input type="text" id="checkouttime" name="checkouttime" placeholder="yyyy-MM-dd HH-mm-ss" autocomplete="off"
						class="layui-input">
				</div>
				
				<label class="layui-form-mid">签到状态:</label>
				<div class="layui-input-inline" style="width: 120px;">
					<select id="checkstate" name="checkstate">
						<option value="">所有</option>
						<option value="1">已签到</option>
						<option value="2">已签退</option>
					</select>
				</div>

				<div class="layui-input-inline" style="width: 300px;">
					<button class="layui-btn" lay-submit lay-filter="search" id="search" data-type="reload"><i
							class="layui-icon">&#xe615;</i>搜索</button>
					<!--<button class="layui-btn layui-btn-normal" lay-submit lay-filter="add" id="add"
						data-type="reload">添加</button>-->
					<a class="layui-btn layui-btn-small" style="line-height:1.6em;"
						href="javascript:location.replace(location.href);" title="刷新">
						<i class="layui-icon" style="line-height:38px">&#xe666;</i>
					</a>
				</div>
			</form>
		</div>

		


		<!--定义数据表格table  -->
		<table class="layui-hide" id="proTable" lay-filter="filterTable"></table>

		<!--表格数据里的编辑、查看等操作按钮  -->
		<!-- <script type="text/html" id="barDemo">
			<a class="layui-btn layui-btn-xs layui-btn-small" lay-event="edit">编辑</a>
			<a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del">删除</a>
		</script> -->



		<script>
			layui.use(['laydate', 'layer', 'form', 'table', 'tree', 'upload', 'transfer'], function() {
				var laydate = layui.laydate //日期组件
					,
					layer = layui.layer //弹层组件
					,
					form = layui.form //表单组件
					,
					upload = layui.upload //上传组件
					,
					tree = layui.tree //树形结构组件
					,
					$ = layui.$ //jQuery
					,
					table = layui.table,
					transfer = layui.transfer; //表格组件

				//日期控件
				laydate.render({
					elem: '#checkintime',
					type: 'datetime'
				});
				laydate.render({
					elem: '#checkouttime',
					type: 'datetime'
				});

				//渲染表格，填充数据
				table.render({
					elem: '#proTable', //对应上面定义的表格ID
					url: "" + globalData.server + "userChecks/selectUserChecksAll", //提交到后台的地址
					method: 'post', //提交方式 get或者post
					where: {
						// "userid": globalData.getCurUid(),
						"token": globalData.token
					},
					even: true, //表格隔行变色
					page: true, //开启分页
					toolbar: false, //开启头部工具栏，并为其绑定左侧模板
					title: '产品表', //表格名称
					cols: [
						[{
//							field: 'id', //对应实体类里的属性    （必需有）
//							fixed: 'left', //固定方式，left左固定，right右固定 （可选）
//							align: 'center', //排列方式：left左对齐，center居中，right右对齐（可选）
//							title: '学生id', //表头名称			（必需有）
//							sort: true,
//							width: 100 //开启排序（可选）
//						}, {
							field: 'id',
							title: '编号',
							width: 100
						}, {
							field: 'userid',
							title: '用户id',
							width: 100
						}, {
							field: 'username',
							title: '用户姓名'
						}, {
							field: 'checkintime', //对应实体类里的属性
							title: '签到时间' //表头名称
						}, {
							field: 'checkouttime',
							title: '签退时间',
							width: 150
						}, {
							field: 'checkstate',
							title: '签到状态',
							width: 100,
							templet: function (d) {
				                if (d.checkstate =='1'){
				                    return '已签到'
				                }else if(d.checkstate =='2') {
				                    return '已签退'
				                }else {
				                    return '未签到'
				                }
				            }
						}]
					]
				});


				/*
					条件查询	submit 对应 lay-submit  search 对应 lay-filter
				*/
				form.on('submit(search)', function(data) {
					var field = data.field; //获取所有的输入条件值
					//执行重载
					table.reload('proTable', {
						page: {
							curr: 1
						}, // 重载后回到第一页
						where: field // 把所有的输入值传给后台
					});
				});
				
			});
		</script>
	</body>
</html>
